<!DOCTYPE html>
<html lang="en">

<head>
    <title>QA安全测试平台</title>
    <meta charset="utf-8">

    <!-- CORE CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">

    <!-- hljs Styles-->
    <link href="assets/css/hljs.css" rel="stylesheet"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">


    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-2.1.1.min.js"></script>
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

    <script type="text/javascript">
        //获取url参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }

        //设置problemsTable隐藏项
        function detailFormatter(index, row) {
            var html = [];
            var showKey = [["name", "测试项目名称"],["desc", "问题描述"], ["activiti", "检测流程"], ["output", "评测输出"], ["subscribe", "修复建议"]]
            for (var i = 0; i < showKey.length; i++) {
                html.push('<p><b>' + showKey[i][1] + ':</b> ' + row[showKey[i][0]] + '</p>');
            }
            return html.join('');
        }

        $(document).ready(function () {

            var report = '';
            var id = getUrlParam('id');
            $.ajax({
                url: 'http://192.168.10.147:5000/report/' + id,
                type: 'GET',
                success: function (data) {
                    console.log(data.title)
                    $("#title").text(data.title)
                    $("#testResult").text(data.testResult)
                    $("#environment").text(data.environment)
                    $("#tool").text(data.tool)

                    var points = $.parseJSON(data.points)
                    var jsonArray = [];
                    var locationIndex = [];
                    //根据返回points遍历pointsTable data
                    for (var i = 0; i < points.length; i++) {

                        for (var j = 0; j < points[i].items.length; j++) {
                            var item = [];
                            item["point"] = points[i].point;
                            item["type"] = points[i].items[j].type;
                            item["testItem"] = points[i].items[j].testItem;
                            item["result"] = points[i].items[j].result;
                            item["level"] = points[i].items[j].level;
                            item["colspan"] = j + 1;
                            item["rowspan"] = 1;
                            jsonArray.push(item)
                        }
                        locationIndex.push(points[i].items.length)
                    }

                    //设置pointsTable表格数据
                    $('#pointsTable').bootstrapTable({
                        columns: [{
                            field: 'point',
                            title: '测试功能清单'
                        }, {
                            field: 'testItem',
                            title: '测试项'
                        }, {
                            field: 'type',
                            title: '类型'
                        }, {
                            field: 'level',
                            title: '风险等级'
                        }, {
                            field: 'result',
                            title: '评测结果'
                        }],
                        data: jsonArray
                    });

                    //对表格同一个功能点进行合并单元格
                    var num = 0;
                    for (var i = 0; i < locationIndex.length; i++) {
                        $("#pointsTable").bootstrapTable('mergeCells', {
                            index: num,
                            field: 'point',
                            colspan: 1,
                            rowspan: locationIndex[i],
                        });
                        num += locationIndex[i]
                    }

                    //设置problemsTable数据
                    $('#problemsTable').bootstrapTable({
                        columns: [{
                            field: 'description',
                            title: '测试功能清单'
                        }, {
                            field: 'level',
                            title: '风险等级'
                        }, {
                            field: 'result',
                            title: '评测结果'
                        }],
                        data: $.parseJSON(data.problems)
                    });
                },
                error: function () {
                }

            })
        })
    </script>
</head>
<body data-spy="scroll">

<!-- WRAPPER -->
<div id="wrapper">

    <div id="nav"></div>

    <div id="page-wrapper">
        <!--</div>-->
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <form>
                                <div class="form-group" align="center">
                                    <label style="font-size: 30px" id="title"></label>
                                </div>
                                <div class="form-group">
                                    <label style="font-size: 20px">一、基本信息</label>
                                </div>
                                <div class="form-group">
                                    <p>
                                        <span>测试环境:</span>
                                        <span id="environment"></span>
                                    </p>
                                    <p>
                                        <span>测试工具:</span>
                                        <span id="tool"></span>
                                    </p>
                                    <p>
                                        <span>评测结果:</span>
                                        <span id="testResult"></span>
                                    </p>
                                </div>
                                <div class="form-group">
                                    <label style="font-size: 20px">二、功能点</label>
                                </div>

                                <div class="table-responsive">
                                    <table id="pointsTable">
                                    </table>
                                </div>
                                <div class="form-group">
                                    <label style="font-size: 20px">三、问题说明</label>
                                </div>

                                <div class="table-responsive">
                                    <table  id="problemsTable" data-detail-view="true" data-detail-formatter="detailFormatter">
                                    </table>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>
